<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo07</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        template: `
                    <h2>JSPang.com</h2>
                    <counter :counter="counter" @add = "handleAddCounter"/>  
             `,                     //6 在父组件模板中 添加add响应事件 然后响应事件调用handleAddCounter事件函数
        methods:{
            handleAddCounter(){
                this.counter+=1
            }                       //2 父组件有了这个方法就可以改变counter的值了  怎么在子组件里调用这个 函数
        }     
    })
    app.component('Counter', {
        props: ['counter'],     
        emit: ["add"],              //5 add响应事件 
        methods:{
            handleAddCounter(){
                this.$emit("add")
            }
        },
        template: `             
        {{counter}}<button @click="handleAddCounter">增加数量</button>
    `    //3 在子组件的模板template中编写click事件  
         //4 想调用父组件中的handleAddConter方法，这时候可以在子组件中新建一个方法handleClick，然后用$emit调用父组件的响应事件add                           
         //0 单向数据流的 不可改变的 
    })

    const vm = app.mount("#app")

    /*
        *1 子组件调用父组件的事件 从而改变父组件的值 在父组件里编写一个方法函数 handleAddCounter
    
    */
</script>

</html>